<template>
  <div>
    <el-button type="danger" icon="el-icon-delete" circle @click="deletes">批量删除</el-button>
    <el-tree show-checkbox
             ref="tree"
             node-key="catId"
             :expand-on-click-node="false"
             :data="data"
             :default-expanded-keys="showTree"
             :props="defaultProps"
             @node-click="handleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="node.level<=2"
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => edit(data)">
            Edit
          </el-button>
          <el-button
            v-if="node.childNodes.length===0"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="70px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型图标" label-width="70px">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item label="数量单位" label-width="70px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listTree,deleteType,saveType,updateType,deletes } from '../../../api/product'
  export default {
    data () {
      return {
        tar:'',
        dialogFormVisible: false,
        form:{
          icon:'',
          productUnit:'',
          name:'',
          parentCid:'',
          catLevel:'',
        },
        showTree:[],
        data: [],
        defaultProps:{
          children: 'list',
          label: 'name'
        },
      }
    },
    created() {
      this.getListTree()
    },
    methods: {
      deletes(){
        const keys = this.$refs.tree.getCheckedKeys();
        this.$notify({
          title: '操作成功',
          message:  `自己操作吧·····`
        });
      },
      edit(data){
        this.tar = 'edit'
        this.form = {}
        this.dialogFormVisible = true
        this.form = data
      },
      sub(){
        this.dialogFormVisible = false
        if (this.tar === "edit") {
          updateType(this.form).then(res=>{
            this.$notify({
              title: '操作成功',
              message:  res.message
            });
            this.getListTree()
            this.showTree = [this.form.parentCid]
          })
        }else if (this.tar === "add") {
          saveType(this.form).then(res=>{
            this.$notify({
              title: '操作成功',
              message:  res.message
            });
            this.getListTree()
            this.showTree = [this.form.parentCid]
          })
        }
      },
      append(node){
        this.tar = 'add'
        this.form = {}
        this.form.catLevel = node.catLevel*1+1
        this.form.parentCid = node.catId
        this.dialogFormVisible = true
      },
      remove(node, data){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteType(data.catId).then(res=>{
            this.$notify({
              title: '操作成功',
              message:  res.message
            });
            this.getListTree()
            this.showTree = [node.parent.data.catId]
          })
        }).catch(() => {
          this.$notify({
            title: '操作终止',
            message:  "已取消删除"
          });
        });
      },
      handleNodeClick(){

      },
      getListTree() {
        listTree().then(res => {
          this.data = res.data
        })
      }
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
